<template>
  <div id="hitchOrderBottomDetail">
    <div class="hittch_cancel_bg" v-show="hittchCancelBg"></div>
    <div class="hittch_cancel_box" v-show="hittchCancelBox">
      <div class="hittch_cancel_box_lit">
        <h6 class="hittch_cancel_hd">
          <span @click="cancelRule">
            <md-icon name="tishi" class="quxiao_icon"></md-icon>取消规则
          </span>
        </h6>
        <p class="hittch_cancel_ioc">
          <img src="@/assets/imgs/tishi@2x.png" class="hittch_cancel_icon" />
        </p>
        <p class="hittch_cancel_title">取消订单</p>
        <p class="hittch_cancel_text">车主马上就到了，您确定不要再等等吗？</p>
        <p class="hittch_cancel_btn">
          <span class="cancel_btn_one" @click="hitchCancelOrder">取消订单</span>
          <span class="cancel_btn_two" @click="cancelBtnTwo">再等等</span>
        </p>
      </div>
    </div>
    <div class="sharecover" v-show="Issharecover" @click="sharecoverBtn"></div>
    <!--二维码分享-->
    <div class="code_box" v-show="Iscodebox">
      <div ref="qrcode" class="qrcode"></div>
      <p class="qrcode_text">长按二维码进行分享</p>
    </div>
    <!--微信分享-->
    <div v-show="Issharebox" class="share_box">
      <img src="@/assets/imgs/share_right.png" />
      <p>点击右上角按钮发送给微信好友或分享到微信朋友圈</p>
    </div>
    <div class="order_hitchdetail_box" v-show="orderHitchdetailStatus=='0'">
      <p class="dingwei" @click="hitchDingweiBtn">
        <img src="@/assets/imgs/dingwei@2x.png" />
      </p>
      <div class="invitation_information">
        <!--订单取消-->
        <div class="hitch_complete_box" v-show="carStatus=='5'">
          <h6>
            订单{{dutyType}}取消
            <span @click="cancelRule">
              <b>取消规则</b>
              <img src="@/assets/imgs/tishi@2x.png" />
            </span>
            <em @click="goToCharger">
              已支付{{getHitchOrderDetailData?getHitchOrderDetailData.payAmt:''}}元
              <img src="@/assets/imgs/arrow_right.png" />
            </em>
          </h6>
          <p>
            {{cancelUser}} {{dutyType}}
            <span style="position:relative;top:2px;color:#999;font-size:22px;">已退款</span>
          </p>
        </div>
        <!--中断订单-->
        <div v-show="carStatus=='6'">
          <!--中断订单-->
          <div class="hitch_complete_box">
            <h6>
              {{getHitchOrderDetailData?getHitchOrderDetailData.orderStatus:''}}
              <span @click="cancelRule">
                <b>取消规则</b>
                <img src="@/assets/imgs/tishi@2x.png" />
              </span>
              <em @click="goToCharger">
                已支付{{getHitchOrderDetailData?getHitchOrderDetailData.orderEstimateAmt:''}}元
                <img
                  src="@/assets/imgs/arrow_right.png"
                />
              </em>
            </h6>
            <p>
              {{getHitchOrderDetailData?getHitchOrderDetailData.interruptStatusText:''}}
              <span
                style="position:relative;top:2px;color:#999;font-size:22px;"
              >{{getHitchOrderDetailData?getHitchOrderDetailData.refundStatusText:''}}</span>
            </p>
          </div>
        </div>
        <!--已完成-->
        <div v-show="carStatus=='4'" class="hitch_complete_box">
          <h6 @click="goToCharger">
            实际支付{{getHitchOrderDetailData?getHitchOrderDetailData.payAmt:''}}元
            <span>
              <img src="@/assets/imgs/tishi@2x.png" />
            </span>
          </h6>
          <p>当前订单按独享价格收取，请知晓</p>
        </div>
        <div class="driver_box">
          <p
            class="driver_box_hx"
            @click="hideTrip"
            v-show="carStatus=='1'||carStatus=='2'||carStatus=='3'||carStatus=='7'"
          ></p>
          <div class="driver_photo">
            <p>
              <img :src="driver_photoImg" />
              <span>{{getHitchOrderDetailData?getHitchOrderDetailData.driverGrade:''}}</span>
            </p>
          </div>
          <div class="driver_car">
            <p>
              <span class="car-number">{{getHitchOrderDetailData?getHitchOrderDetailData.plate:''}}</span>
              <span
                class="car_type"
              >{{getHitchOrderDetailData?getHitchOrderDetailData.carColour:''}}.{{getHitchOrderDetailData?getHitchOrderDetailData.carBrandModel:''}}</span>
            </p>
            <p>
              <span class="driver-name">{{getHitchOrderDetailData?getHitchOrderDetailData.driverNickName:''}}</span>
              <span class="stars">
                <i class="active"></i>
              </span>
              <span class="dirver-score">{{starsNumber}}</span>
              <span class="dirver_number">{{getHitchOrderDetailData?getHitchOrderDetailData.driverReceiptNumber:''}}单</span>
            </p>
          </div>
          <div class="driver_phone">
            <span @click="callDriver">
              <img src="@/assets/imgs/phone_ico.png" />
            </span>
          </div>
        </div>
        <div style="clear:both"></div>
        <div v-show="carType=='1'">
          <div v-show="carStatus=='1'|| carStatus=='2' || carStatus=='7'">
            <div class="Colleague_per" v-if="sameUsers">
              <ul>
                <li>
                  <p>
                    已接到
                    <span>{{getHitchOrderDetailData.allotOrderNum?getHitchOrderDetailData.allotOrderNum:''}}位</span>乘客
                  </p>
                </li>
              </ul>
            </div>
            <div v-else class="colleague_no">
              <p>
                <img src="@/assets/imgs/chixuxunzhao_icon.png" class="Rotation" />持续寻找乘客中…
              </p>
            </div>
          </div>
        </div>
        <div style="clear:both"></div>
        <div class="orderinformation_box" v-show="tripList">
          <ul class="orderinformation_list">
            <li>
              <md-icon name="snkc_xcqx_time" slot="left" class="snkc_xcqx_time"></md-icon>
              <span>{{getHitchOrderDetailData?getHitchOrderDetailData.departureTimeText:''}}</span>
              <em>{{getHitchOrderDetailData?getHitchOrderDetailData.orderLabel:''}}</em>
            </li>
            <li>
              <md-icon name="shangchedian" slot="left" class="shangchedian"></md-icon>
              <span>{{getHitchOrderDetailData?getHitchOrderDetailData.originCity:''}} {{getHitchOrderDetailData?getHitchOrderDetailData.originShortAddress:''}} {{getHitchOrderDetailData?getHitchOrderDetailData.originDistance:''}}</span>
            </li>
            <li>
              <md-icon name="xiachedian" slot="left" class="shangchedian"></md-icon>
              <span>{{getHitchOrderDetailData?getHitchOrderDetailData.destCity:''}} {{getHitchOrderDetailData?getHitchOrderDetailData.destShortAddress:''}} {{getHitchOrderDetailData?getHitchOrderDetailData.destDistance:''}}</span>
            </li>
          </ul>
        </div>
        <div style="clear:both"></div>
        <!--评价-->
        <div v-show="carStatus=='4'" class="hitchevaluate_box">
          <div v-show="evaluateState=='0'">
            <!--未评价-->
            <p class="evaluate_box_hd">
              您对本次同行体验如何？
              <span>匿名</span>
            </p>
            <div class="starWrap">
              <img :src="level>index?stara:starb" v-for="(item,index) in levelList" :key="index" @click="goEvaluate" />
            </div>
          </div>
          <div v-show="evaluateState=='1'">
            <!--已评价-->
            <p class="evaluate_box_hd">
              您对本次同行体验如何？
              <span>匿名</span>
            </p>
            <div class="starWrap">
              <img :src="level>index?stara:starb" v-for="(item,index) in levelList" :key="index" />
            </div>
            <p class="evaluate_detail" @click="seeEvaluteBtn">
              评价详情
              <img src="@/assets/imgs/arrow_right.png" />
            </p>
          </div>
        </div>
        <!--底部-->
        <div class="orderinformation_bottom">
          <ul>
            <li @click="hitchShare">
              <md-icon name="share_icon" slot="left" class="quxiao_icon"></md-icon>分享行程
            </li>
            <li @click="callServicePhone">
              <md-icon name="kefu_icon" slot="left" class="quxiao_icon"></md-icon>联系客服
            </li>
            <li v-show="carStatus=='1'||carStatus=='2'||carStatus=='7'" @click="cancelOrder">
              <md-icon name="quxiao_icon" slot="left" class="quxiao_icon"></md-icon>取消订单
            </li>
            <li v-show="carStatus=='3'" @click="interruptionOrder">
              <md-icon name="zanting_icon" slot="left" class="quxiao_icon"></md-icon>中断订单
            </li>
            <li v-show="evaluateState=='1'" @click="jionBackList">
              <md-icon name="heimingdan_icon" slot="left" class="quxiao_icon"></md-icon>加入黑名单
            </li>
            <li v-show="carStatus=='5'||carStatus=='6'" @click="jionBackList">
              <md-icon name="heimingdan_icon" slot="left" class="quxiao_icon"></md-icon>加入黑名单
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div v-show="orderHitchdetailStatus=='1'">
      <div v-show="evaluateState=='0'">
        <!--未评价弹窗-->
        <md-popup v-model="evaluateValue" position="bottom" :has-mask="true" prevent-scroll @hide="evaluateCancel">
          <md-popup-title-bar title="匿名评价" cancel-text="取消" @cancel="evaluateCancel"></md-popup-title-bar>
          <div class="evaluate_box">
            <div class="starWrap">
              <img
                :src="level>index?stara:starb"
                v-for="(item,index) in levelList"
                :key="index"
                @click="getlevel(index)"
              />
              <p>{{evaluateResulttext}}</p>
            </div>
            <div>
              <ul class="evaluationList">
                <li
                  v-for="(item, index) in evaluationList"
                  :key="index"
                  @click="getevaluationList(index,item)"
                  :class="{'evaluation-active':evaluationArr[index]}"
                  ref="menuItem"
                >{{item.levelLabelName}}</li>
              </ul>
            </div>
            <div style="clear:both"></div>
            <p class="taxi_pay" @click="incityEvaluteBtn">匿名提交</p>
          </div>
        </md-popup>
      </div>
      <div v-show="evaluateState=='1'">
        <!--已评价弹窗-->
        <md-popup
          v-model="alreadyEvaluate"
          position="bottom"
          :has-mask="true"
          prevent-scroll
          @hide="alreadyEvaluateCancel"
        >
          <md-popup-title-bar title="匿名评价" cancel-text="取消" @cancel="alreadyEvaluateCancel"></md-popup-title-bar>
          <div class="evaluate_box">
            <div class="starWrap">
              <img :src="level>index?stara:starb" v-for="(item,index) in levelList" :key="index" />
              <p>{{evaluateResulttext}}</p>
            </div>
            <div>
              <ul class="evaluationList">
                <li
                  v-for="(item, index) in hitchLookEvaluationList"
                  :key="index"
                  class="evaluation-active"
                  ref="menuItem"
                >{{item}}</li>
              </ul>
            </div>
            <div style="clear:both"></div>
          </div>
        </md-popup>
      </div>
    </div>
    <!--中断订单弹窗-->
    <div v-show="orderHitchdetailStatus=='2'">
      <md-popup
        v-model="interruptionValue"
        position="bottom"
        :has-mask="true"
        prevent-scroll
        @hide="interruptionCancel"
      >
        <md-popup-title-bar title="请选择原因" cancel-text="取消" @cancel="interruptionCancel"></md-popup-title-bar>
        <div class="evaluate_box">
          <p class="interruption_text">中断订单后，司机将无法结账，待客服审核判断责任方，如司机责任责全款返回，如乘客责任，将扣除已行驶记录的路费和服务费</p>
          <div>
            <ul class="evaluationList">
              <li
                v-for="(item,index) in interruptionArr"
                :key="index"
                @click="interruptionLab(index,item)"
                :class="{'interruption-active':interruptionArrList[index]}"
              >{{item}}</li>
            </ul>
          </div>
          <div style="clear:both"></div>
          <div class="complaints_input">
            <textarea placeholder="其它原因" v-model="interruptionDescribe" maxlength="50"></textarea>
            <div class="input_calc">{{interruptionDescribeLength}}/50</div>
          </div>
          <p class="taxi_pay" @click="breakOrder">提交</p>
        </div>
      </md-popup>
    </div>
    <!--订单未支付状态下取消-->
    <div class="order_hitchdetail_box" v-show="orderHitchdetailStatus=='3'">
      <div class="invitation_information">
        <div class="hitch_complete_box" style="border:none">
          <h6>
            订单无责取消
            <span @click="cancelRule">
              <b>取消规则</b>
              <img src="@/assets/imgs/tishi@2x.png" />
            </span>
            <em @click="goToCharger">
              未支付{{getHitchOrderDetailData?getHitchOrderDetailData.orderEstimateAmt:''}}元
              <img
                src="@/assets/imgs/arrow_right.png"
              />
            </em>
          </h6>
          <p>
            {{cancelUser}}
            <b v-show="cancelUserType=='1' || cancelUserType=='2'">{{dutyType}}</b>
          </p>
        </div>
        <div class="orderinformation_box">
          <ul class="orderinformation_list">
            <li>
              <md-icon name="snkc_xcqx_time" slot="left" class="snkc_xcqx_time"></md-icon>
              <span>{{getHitchOrderDetailData?getHitchOrderDetailData.departureTimeText:''}}</span>
              <em>{{getHitchOrderDetailData?getHitchOrderDetailData.orderLabel:''}}</em>
            </li>
            <li>
              <md-icon name="shangchedian" slot="left" class="shangchedian"></md-icon>
              <span>{{getHitchOrderDetailData?getHitchOrderDetailData.originCity:''}} {{getHitchOrderDetailData?getHitchOrderDetailData.originShortAddress:''}} {{getHitchOrderDetailData?getHitchOrderDetailData.originDistance:''}}</span>
            </li>
            <li>
              <md-icon name="xiachedian" slot="left" class="shangchedian"></md-icon>
              <span>{{getHitchOrderDetailData?getHitchOrderDetailData.destCity:''}} {{getHitchOrderDetailData?getHitchOrderDetailData.destShortAddress:''}} {{getHitchOrderDetailData?getHitchOrderDetailData.destDistance:''}}</span>
            </li>
          </ul>
        </div>
        <div style="clear:both"></div>
        <div class="orderinformation_bottom">
          <ul>
            <li @click="hitchShare">
              <md-icon name="share_icon" slot="left" class="quxiao_icon"></md-icon>分享行程
            </li>
            <li @click="callServicePhone">
              <md-icon name="kefu_icon" slot="left" class="quxiao_icon"></md-icon>联系客服
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import '@/assets/svgs/share_icon.svg';
import '@/assets/svgs/kefu_icon.svg';
import '@/assets/svgs/quxiao_icon.svg';
import '@/assets/svgs/shangchedian.svg';
import '@/assets/svgs/xiachedian.svg';
import '@/assets/svgs/snkc_xcqx_time.svg';
import '@/assets/svgs/tishi.svg';
import '@/assets/svgs/heimingdan_icon.svg';
import '@/assets/svgs/zanting_icon.svg';
import { GET_CURRENT_LOCATION } from '@/store/actions.types';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import { Dialog, Icon, Popup, PopupTitleBar, Toast } from 'mand-mobile';
import weixinUtils from '@/common/weixinUtils';
import Utils from '@/common/pakjUtils';
import XBack from 'xback';
import http from '@/common/http';
import Loading from '@/components/loading';
import QRCode from 'qrcodejs2';
import { mapGetters, mapActions, mapMutations } from 'vuex';
var moment = require('moment');
moment.locale('zh-cn');
export default {
  name: 'hitch-order-bottom',
  components: {
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [Toast.name]: Toast
  },
  props: {
    carStatus: {
      type: String,
      default: '0'
    },
    tripList: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      hittchCancelBg: false,
      hittchCancelBox: false,
      IsOrderTop: true,
      tripTipText: '',
      driver_photoImg: '',
      starsNumber: '',
      orderHitchdetailStatus: '0', // 0  显示底部订单状态 1 显示评价状态 2 中断状态 3订单未支付取消
      carType: '', // 是拼车还是专享 1拼车 0 专享
      sameUsers: '', //  是否有拼友 true有
      evaluateState: '0', // 评价状态 0 未评价 1 已评价
      level: '0',
      levelList: [0, 1, 2, 3, 4],
      stara: require('@/assets/imgs/xcxq_icon_xing_light@2x.png'), // 亮星星
      starb: require('@/assets/imgs/xcxq_icon_xing_dark@2x.png'), // 暗星星
      evaluateValue: false,
      evaluateResulttext: '',
      hitchLookEvaluationList: [],
      evaluationList: [],
      evaluationArr: [],
      evaluationnewArr: [],
      evaluationnewArrText: [],
      alreadyEvaluate: false,
      interruptionValue: false,
      interruptionStateText: '',
      interruptionArr: [],
      interruptionArrList: [],
      interruptionArrListNew: [],
      interruptionDescribe: '',
      dutyType: '', // 责任人 1司机有责 2乘客有责 0 无责
      duty: '',
      cancelUser: '', // 取消人 1 乘客取消 2 司机取消 3 系统自动取消
      cancelUserType: '',
      Iscodebox: false,
      Issharebox: false,
      Issharecover: false,
      qrcode: ''
    };
  },
  mounted() {
    console.log(this.carStatus);
  },
  methods: {
    // 查询订单信息
    hitchOrderInit() {
      // 车辆信誉分
      this.starsNumber = this.getHitchOrderDetailData.driverCreditScore;
      // 司机头像
      this.driver_photoImg = this.getHitchOrderDetailData.driverHeadPhoto;
      // 订单类型 "1、拼车 0、独享"
      this.carType = this.getHitchOrderDetailData.orderType;
      // 是否有同行拼友
      if (this.getHitchOrderDetailData.allotOrderNum === '0') {
        this.sameUsers = false;
      } else {
        this.sameUsers = true;
      }
      // 取消人
      if (this.getHitchOrderDetailData.cancelUser === '1') {
        //  1 乘客取消
        this.cancelUser = '乘客取消';
        this.cancelUserType = '1';
      } else if (this.getHitchOrderDetailData.cancelUser === '2') {
        //2 司机取消
        this.cancelUser = '司机取消';
        this.cancelUserType = '2';
      } else if (this.getHitchOrderDetailData.cancelUser === '3') {
        this.cancelUser = '订单已超过出发时间，自动取消';
        this.cancelUserType = '3';
      }
      // 支付状态
      if (this.getHitchOrderDetailData.payStatus === '0') {
        // 0 未支付
        this.orderHitchdetailStatus = '3';
        console.log(this.orderHitchdetailStatus);
      } else {
        this.orderHitchdetailStatus = '0';
      }
      // 取消责任人
      if (this.getHitchOrderDetailData.dutyType === '0') {
        //0 无责取消
        this.dutyType = '无责';
      } else if (this.getHitchOrderDetailData.dutyType === '1') {
        //1 乘客有责
        this.dutyType = '有责';
      } else if (this.getHitchOrderDetailData.dutyType === '2') {
        //2 司机有责
        this.dutyType = '有责';
      }
      // 获取评价状态
      if (this.getHitchOrderDetailData.userEvaluate === '0') {
        this.evaluateState = '0';
      } else {
        this.evaluateState = '1';
      }
      // 回显评价星星
      this.level = this.getHitchOrderDetailData.evaluateStars;
      // 回显评价星星描述
      this.evaluateResulttext = this.getHitchOrderDetailData.evaluateStarsDesc;
      // 回显评价标签
      var tagPes = this.getHitchOrderDetailData.evaluatelabel;
      if (tagPes) {
        var tagPesarr = tagPes.split(',');
        for (var i = 0; i < tagPesarr.length; i++) {
          this.hitchLookEvaluationList.push(tagPesarr[i]);
        }
      }
    },
    // 联系司机
    callDriver() {
      window.location.href = 'tel://' + this.getHitchOrderDetailData.driverPhone;
    },
    // 联系客服
    callServicePhone() {
      window.location.href = 'tel://' + this.getHitchOrderDetailData.servicePhone;
    },
    // 费用明细
    goToCharger() {
      this.$router.push({
        name: 'hitchhikeChargesDetails',
        query: {
          orderno: this.$route.query.orderno
        }
      });
    },
    // 中断订单
    interruptionOrder() {
      Dialog.confirm({
        icon: 'tishi',
        title: '确定要中断订单吗？',
        content:
          '如发生特殊的情况，您可尝试先与司机沟通，若沟通无果，建议请先下车，再进行中断订单操作，避免发生危险。',
        confirmText: '确定',
        cancelText: '取消',
        onConfirm: () => {
          this.getBreakLabel();
          this.orderHitchdetailStatus = '2';
          this.interruptionValue = true;
        }
      });
    },
    // 获取中断标签
    getBreakLabel() {
      let params = {
        cityId: this.getHitchOrderDetailData.cityId
      };
      Loading.show();
      http.post('/pakj/hitchOrder/getBreakLabel', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          console.log(res.data);
          this.interruptionArr = res.data.data.labels;
          this.interruptionation();
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    // 获取中断标签写入数组
    interruptionLab(index, item) {
      for (let i = 0; i < this.interruptionArrList.length; i++) {
        if (i === index) {
          this.interruptionArrList[index]
            ? this.interruptionArrList.splice(index, 1, false)
            : this.interruptionArrList.splice(index, 1, true);
          if (this.interruptionArrList[index]) {
            this.interruptionArrListNew.push(this.interruptionArr[index]);
          } else {
            this.interruptionRemoveArr(item);
          }
        }
      }
      console.log(this.interruptionArrListNew);
    },
    interruptionQueryIndexOf(item) {
      for (var i = 0; i < this.interruptionArrListNew.length; i++) {
        if (this.interruptionArrListNew[i] === item) {
          return i;
        }
      }
      return -1;
    },
    interruptionRemoveArr(item) {
      var index = this.interruptionQueryIndexOf(item);
      if (index > -1) {
        this.interruptionArrListNew.splice(index, 1);
      }
    },
    interruptionation() {
      for (let i = 0; i < this.interruptionArr.length; i++) {
        this.interruptionArrList.push(false);
      }
    },
    // 保存中断原因
    breakOrder() {
      if (/\ud83d[\udc00-\ude4f\ude80-\udfff]/g.test(this.interruptionDescribe)) {
        Toast({
          content: '不能输入表情',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      let params = {
        type: '1',
        orderNo: this.getHitchOrderDetailData.orderNo,
        label: this.interruptionArrListNew.join(','), // 标签原因
        reason: this.interruptionDescribe // 文本原因
      };
      Loading.show();
      http.post('/pakj/hitchOrder/breakOrder', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          console.log(res.data);
          this.$emit('hitchOrderEvaluteDetail');
          // this.$router.replace({
          //   name: 'hitchOrderDetail',
          //   query: {
          //     orderno: this.$route.query.orderno
          //   }
          // });
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    evaluateCancel() {
      this.evaluateValue = false;
      this.orderHitchdetailStatus = '0';
      this.evaluationList = [];
      this.evaluationnewArr = [];
      this.evaluationArr = [];
      this.level = '0';
      this.evaluateResulttext = '';
    },
    alreadyEvaluateCancel() {
      this.alreadyEvaluate = false;
      this.orderHitchdetailStatus = '0';
    },
    interruptionCancel() {
      this.interruptionValue = false;
      this.orderHitchdetailStatus = '0';
      this.interruptionArr = [];
      this.interruptionArrList = [];
      this.interruptionArrListNew = [];
      this.interruptionDescribe = '';
    },
    // 获取定位
    hitchDingweiBtn() {
      this.$emit('hitchDingweiBtn');
    },
    // 隐藏起点和终点信息
    hideTrip() {
      this.$emit('hideTrip');
    },
    // 拉起评价
    goEvaluate() {
      this.orderHitchdetailStatus = '1';
      this.evaluateValue = true;
    },
    // 获取评价星星
    getlevel(val) {
      this.evaluationList = [];
      this.evaluationnewArr = [];
      this.evaluationArr = [];
      this.evaluationnewArrText = [];
      this.level = val + 1;
      for (var i in this.getHitchOrderDetailData.orderEvaluateList) {
        if (this.getHitchOrderDetailData.orderEvaluateList[i].level === this.level.toString()) {
          this.evaluateResulttext = this.getHitchOrderDetailData.orderEvaluateList[i].levelText;
          this.evaluationList = this.getHitchOrderDetailData.orderEvaluateList[i].levelSpanList;
        }
      }
      this.putevaluation();
    },
    getevaluationList(index, item) {
      for (let i = 0; i < this.evaluationArr.length; i++) {
        if (i === index) {
          this.evaluationArr[index]
            ? this.evaluationArr.splice(index, 1, false)
            : this.evaluationArr.splice(index, 1, true);
          if (this.evaluationArr[index]) {
            this.evaluationnewArr.push(this.evaluationList[index].levelLabelId);
            this.evaluationnewArrText.push(this.evaluationList[index].levelLabelName);
          } else {
            this.removeArr(item.levelLabelId);
            this.removeArrText(item.levelLabelName);
          }
        }
      }
      console.log(this.evaluationnewArr);
      console.log(this.evaluationnewArrText);
    },
    queryIndexOf(item) {
      for (var i = 0; i < this.evaluationnewArr.length; i++) {
        if (this.evaluationnewArr[i] === item) {
          return i;
        }
      }
      return -1;
    },
    queryIndexOfText(item) {
      for (var i = 0; i < this.evaluationnewArrText.length; i++) {
        if (this.evaluationnewArrText[i] === item) {
          return i;
        }
      }
      return -1;
    },
    removeArr(item) {
      var index = this.queryIndexOf(item);
      if (index > -1) {
        this.evaluationnewArr.splice(index, 1);
      }
    },
    removeArrText(item) {
      var index = this.queryIndexOfText(item);
      if (index > -1) {
        this.evaluationnewArrText.splice(index, 1);
      }
    },
    putevaluation() {
      for (let i = 0; i < this.evaluationList.length; i++) {
        this.evaluationArr.push(false);
      }
    },
    // 提交评价
    incityEvaluteBtn() {
      if (this.evaluationnewArr.join(',').length === 0) {
        Toast({
          content: '请选择评价标签',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      let params = {
        orderNo: this.$route.query.orderno,
        labelId: this.evaluationnewArr.join(','), // 标签Id
        label: this.evaluationnewArrText.join(','), //  评价标签
        stars: this.level.toString(), // 星级评价
        startsDesc: this.evaluateResulttext, // 星级评价描述
        type: '1'
      };
      Loading.show();
      http.post('/pakj/hitchOrder/saveOrderEvalute', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          Dialog.alert({
            title: '提示',
            content: '评价成功',
            confirmText: '确定',
            onConfirm: () => {
              this.evaluateValue = false;
              this.orderHitchdetailStatus = '0';
              this.$emit('hitchOrderEvaluteDetail');
            }
          });
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    // 查看评价
    seeEvaluteBtn() {
      this.alreadyEvaluate = true;
      this.orderHitchdetailStatus = '1';
    },
    cancelBtnTwo() {
      this.hittchCancelBg = false;
      this.hittchCancelBox = false;
    },
    // 取消订单
    cancelOrder() {
      // 判定取消责任
      let params = {
        type: '1',
        orderNo: this.$route.query.orderno
      };
      Loading.show();
      http.post('/pakj/hitchOrder/getCancelOrderDuty', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          console.log(res.data);
          this.duty = res.data.data.duty;
          this.hittchCancelBg = true;
          this.hittchCancelBox = true;
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    hitchCancelOrder() {
      let params = {
        type: '1',
        orderNo: this.$route.query.orderno,
        duty: this.duty
      };
      http.post('/pakj/hitchOrder/cancelOrder', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          this.$router.push({
            name: 'hitchCancel',
            query: {
              orderno: this.$route.query.orderno
            }
          });
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    // 取消规则
    cancelRule() {
      this.$router.push({
        name: 'hitchCancelRule'
      });
    },
    // 加入黑名单
    jionBackList() {
      Dialog.confirm({
        icon: 'tishi',
        title: '添加至黑名单',
        content: '是否将该车主加入黑名单',
        confirmText: '确认',
        cancelText: '再想想',
        onConfirm: () => {
          let parm = {
            blackType: '1', // 1:用户拉黑/2:司机拉黑
            userId: this.getHitchOrderDetailData.userId, // 拉黑人Id
            pushBlackId: this.getHitchOrderDetailData.driverId, // 被拉黑人Id
            reason: '' // 拉黑原因
          };
          http.post('/pakj/hitchUser/saveBlackUser', parm).then(res => {
            if (res.data.code === '000000') {
              console.log(res.data);
            } else {
              Dialog.alert({
                title: '提示',
                content: res.data.msg,
                confirmText: '确定'
              });
            }
          });
        }
      });
    },
    // 分享行程
    hitchShare() {
      this.Issharecover = true;
      this.getshareTrip();
    },
    sharecoverBtn() {
      this.Issharecover = false;
      this.Iscodebox = false;
      this.Issharebox = false;
    },
    getshareTrip() {
      let params = {
        order_no: this.$route.query.orderno,
        type: '4'
      };
      Loading.show();
      http.post('/pakj/order/getShareOrderUrl', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          console.log(res.data);
          this.shareTripUrl = res.data.data.shareUrl;
          this.getshareConfig(
            res.data.data.shareUrl,
            res.data.data.shareTitle,
            res.data.data.shareDesc
          );
          // 判断是微信还是h5中
          if (Utils.isWeixinBroswer()) {
            //  微信中
            this.Issharebox = true;
          } else {
            this.Iscodebox = true;
            if (!this.qrcode) {
              this.qrcode = new QRCode(this.$refs.qrcode, {
                width: 120,
                height: 120, // 高度
                text: this.shareTripUrl // 二维码链接
              });
            }
          }
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    getshareConfig(shareUrl, shareTitle, shareDesc) {
      weixinUtils
        .wxConfig([
          'onMenuShareTimeline', // 分享到朋友圈接口
          'onMenuShareAppMessage', //  分享到朋友接口
          'onMenuShareQQ', // 分享到QQ接口
          'onMenuShareQZone', // 分享到qq空间
          'onMenuShareWeibo' // 分享到微博接口
          // 'updateAppMessageShareData', // 分享给朋友及分享到QQ
          // 'updateTimelineShareData ' // 分享到朋友圈及分享到QQ空间
        ])
        .then(() => {
          let shareData = {
            imgUrl: 'https://img.padj.group/pakj_logo.png', // 分享显示的缩略图地址
            link: shareUrl, // 分享地址
            desc: shareTitle, // 分享描述
            title: shareDesc, // 分享标题
            success: () => {
              this.sharecoverBtn();
            }
          };
          wx.onMenuShareTimeline(shareData);
          wx.onMenuShareAppMessage(shareData);
          wx.onMenuShareQQ(shareData);
          wx.onMenuShareQZone(shareData);
          wx.onMenuShareWeibo(shareData);
        })
        .catch(reason => {
          // config信息验证失败会执行error函数，如签名过期导致验证失败
          // 具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看
          // 对于SPA可以在这里更新签名
          alert('好像出错了');
        });
    }
  },
  watch: {},
  computed: {
    ...mapGetters(['getHitchOrderDetailData']),
    interruptionDescribeLength() {
      return this.interruptionDescribe.length;
    }
  }
};
</script>
<style lang="stylus" scoped>
#hitchOrderBottomDetail {
  p, h6 {
    display: block;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }

  .order_hitchdetail_box {
    position: absolute;
    bottom: 20px;
    z-index: 1001;
    width: 100%;
  }

  .dingwei {
    margin-left: 30px;
  }

  .dingwei img {
    width: 56px;
    height: 56px;
  }

  .invitation_information {
    background-color: #fff;
    border-radius: 10px;
    margin: 0px 20px;
  }

  .driver_box {
    padding: 20px 30px;
  }

  .driver_photo {
    float: left;
  }

  .driver_photo p {
    position: relative;
  }

  .driver_photo p span {
    position: absolute;
    bottom: 0px;
    left: -5px;
    background-color: #6E6E6E;
    color: #fff;
    font-size: 24px;
    padding: 2px 2px;
    display: inline-block;
    width: 100px;
    text-align: center;
  }

  .driver_photo p img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }

  .super_driver {
    position: absolute;
    bottom: -20px;
    left: -7px;
    z-index: 10;
    font-size: 18px;
    color: #fff;
    background-color: #6E6E6E;
    width: 100%;
    padding: 2px 5px;
  }

  .driver_car {
    float: left;
  }

  .driver_car p {
    margin-top: 10px;
    margin-left: 24px;
  }

  .driver-name {
    font-size: 30px;
    color: #333;
  }

  .stars {
    margin-left: 16px;
  }

  .stars i {
    display: inline-block;
    width: 24px;
    height: 22px;
    background: url('../../../assets/imgs/xcxq_icon_xing_dark@2x.png') no-repeat center center;
    background-size: 24px 22px;
  }

  .stars i.active {
    background-image: url('../../../assets/imgs/wf.png');
  }

  .dirver-score {
    font-size: 26px;
    color: #666;
    margin-left: 5px;
  }

  .dirver_number {
    font-size: 26px;
    color: #666;
    margin-left: 20px;
  }

  .car-number {
    font-size: 26px;
    color: #666;
  }

  .car_type {
    font-size: 26px;
    color: #666;
    margin-left: 20px;
  }

  .driver_phone {
    float: right;
    margin-top: 28px;
  }

  .driver_phone span {
    margin-left: 10px;
  }

  .driver_phone span img {
    width: 44px;
    height: 44px;
  }

  .Colleague_per {
    border-top: solid 1px #E0E0E0;
    margin-top: 20px;
    padding: 0px 30px;
  }

  .Colleague_per ul li {
    float: left;
    margin-top: 26px;
    margin-left: 20px;
    margin-bottom: 20px;
  }

  .Colleague_per ul li p {
    font-size: 24px;
    color: #666;
  }

  .Colleague_per ul li p span {
    color: #FF6917;
  }

  .colleague_no {
    border-top: solid 1px #E0E0E0;
    margin-top: 24px;
    padding: 0px 30px;
  }

  .colleague_no p {
    height: 65px;
    line-height: 65px;
    font-size: 24px;
    color: #666;
    margin-top: 10px;
  }

  .colleague_no p img {
    width: 24px;
    height: 24px;
    position: relative;
    top: 4px;
    right: 8px;
  }

  @keyframes rotation {
    from {
      -webkit-transform: rotate(0deg);
    }

    to {
      -webkit-transform: rotate(360deg);
    }
  }

  .Rotation {
    -webkit-transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
  }

  .orderinformation_box {
    border-top: solid 1px #E0E0E0;
    margin-top: 10px;
  }

  .orderinformation_list {
    padding-top: 20px;
    position: relative;
  }

  .orderinformation_list li {
    margin: 0px 30px;
    font-size: 24px;
    color: #666;
    margin-top: 10px;
  }

  .orderinformation_list li span {
  }

  .orderinformation_list li em {
    font-size: 20px;
    color: #999;
    border: solid 1px #E0E0E0;
    padding: 4px 10px;
    margin-left: 20px;
    font-style: normal;
    border-radius: 6px;
    position: relative;
    bottom: 3px;
  }

  .snkc_xcqx_time {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    position: relative;
    bottom: 1px;
  }

  .shangchedian {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    position: relative;
    bottom: 3px;
  }

  .orderinformation_bottom {
    border-top: solid 1px #E0E0E0;
    margin-top: 14px;
    padding: 0px 30px;
  }

  .orderinformation_bottom ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .orderinformation_bottom ul li {
    margin-top: 30px;
    font-size: 24px;
    color: #666;
    padding-bottom: 30px;
  }

  .quxiao_icon {
    width: 24px;
    height: 24px;
    position: relative;
    top: 3px;
    margin-right: 8px;
  }

  .hitch_complete_box {
    border-bottom: solid 1px #E0E0E0;
    padding: 0px 30px 20px 30px;
  }

  .hitch_complete_box h6 {
    font-size: 28px;
    color: #333;
    font-weight: 400;
    padding-top: 20px;
  }

  .hitch_complete_box h6 span b {
    font-weight: 400;
    color: #FF6917;
  }

  .hitch_complete_box h6 span {
    margin-left: 10px;
  }

  .hitch_complete_box h6 span img {
    width: 28px;
    height: 28px;
    position: relative;
    top: 4px;
    left: 6px;
  }

  .hitch_complete_box h6 em {
    font-style: normal;
    float: right;
    font-size: 26px;
    color: #666;
  }

  .hitch_complete_box h6 em img {
    width: 15px;
    height: 25px;
  }

  .hitch_complete_box p {
    font-size: 22px;
    color: #999;
    margin-top: 10px;
  }

  .hitch_complete_box p span {
    font-size: 26px;
    color: #666;
    float: right;
    position: relative;
    bottom: 20px;
  }

  .hitch_complete_box p span img {
    width: 15px;
    height: 25px;
  }

  .hitchevaluate_box {
    border-top: solid 1px #E0E0E0;
    margin-top: 20px;
  }

  .evaluate_box_hd {
    padding: 20px 30px 0px 30px;
    font-size: 30px;
    color: #333;
  }

  .evaluate_box_hd span {
    margin-left: 20px;
  }

  .starWrap {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    padding-bottom: 20px;
  }

  .starWrap img {
    width: 50px;
    height: 50px;
    margin-left: 30px;
  }

  .evaluate_detail {
    text-align: center;
    font-size: 24px;
    color: #999;
    padding-bottom: 10px;
  }

  .evaluate_detail img {
    width: 12px;
    height: 20px;
    position: relative;
    top: 3px;
  }

  .evaluate_box {
    background-color: #fff;
    padding: 30px 0px;
  }

  .evaluationList li {
    height: 72px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    float: left;
    text-align: center;
    line-height: 72px;
    margin-left: 5%;
    margin-top: 20px;
    font-size: 28px;
    color: #666;
    padding: 0px 25px;
  }

  .evaluationList li.evaluation-active {
    border: 1px solid #ff6917;
    color: #ff6917;
  }

  .evaluationList li.interruption-active {
    border: 1px solid #ff6917;
    color: #ff6917;
  }

  .taxi_pay {
    background-color: #ff6917;
    height: 98px;
    line-height: 98px;
    font-size: 36px;
    color: #fff;
    text-align: center;
    margin: 20px 20px 0px 20px;
    border-radius: 7px;
  }

  .interruption_text {
    font-size: 20px;
    color: #999;
    padding: 10px 30px 10px 30px;
  }

  .complaints_input {
    background-color: #fff;
    margin-top: 2px;
    padding: 16px 30px 16px 30px;

    .input_calc {
      font-size: 24px;
      color: rgba(153, 153, 153, 1);
      line-height: 24px;
      width: 100%;
      text-align: right;
    }
  }

  .complaints_input textarea {
    border: none;
    resize: none;
    font-size: 26px;
    width: 100%;
    height: 160px;
    padding: 0px 0px;
    outline: none;
  }

  .hittch_cancel_bg {
    background: rgba(0, 0, 0, 0.6);
    height: 100vh;
    width: 100%;
    position: absolute;
    z-index: 1002;
    top: 0px;
    left: 0px;
  }

  .hittch_cancel_box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 620px;
    height: 420px;
    margin-top: -210px;
    margin-left: -310px;
    background: #fff;
    border-radius: 12px;
    z-index: 1003;
  }

  .hittch_cancel_box_lit {
    margin: 0px 40px;
  }

  .hittch_cancel_hd {
    font-size: 24px;
    color: #666;
    font-weight: 400;
    padding-top: 20px;
    height: 40px;
  }

  .hittch_cancel_hd span {
    float: right;
  }

  .hittch_cancel_ioc {
    text-align: center;
  }

  .hittch_cancel_icon {
    width: 80px;
    height: 80px;
  }

  .hittch_cancel_title {
    text-align: center;
    font-size: 36px;
    color: #333;
    margin-top: 10px;
  }

  .hittch_cancel_text {
    font-size: 28px;
    color: #666;
    margin-top: 15px;
    text-align: center;
  }

  .hittch_cancel_btn {
    margin-top: 30px;
    text-align: center;
  }

  .cancel_btn_one {
    width: 240px;
    height: 88px;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    border: 2px solid rgba(198, 198, 198, 1);
    color: #666;
    font-size: 36px;
    text-align: center;
    line-height: 88px;
    display: inline-block;
  }

  .cancel_btn_two {
    width: 240px;
    height: 88px;
    background: rgba(255, 105, 23, 1);
    border-radius: 10px;
    margin-left: 20px;
    color: #fff;
    font-size: 36px;
    text-align: center;
    line-height: 88px;
    display: inline-block;
  }

  .driver_box_hx {
    margin: 10px auto;
    height: 10px;
    width: 88px;
    border-top: solid 1px #E0E0E0;
    border-bottom: solid 1px #E0E0E0;
  }

  .sharecover {
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0px;
    background-color: #000;
    opacity: 0.5;
    z-index: 9999;
  }

  .code_box {
    position: absolute;
    z-index: 10000;
    top: 35%;
    left: 35%;
  }

  .qrcode_text {
    font-size: 28px;
    color: #fff;
    marign-top: 20px;
  }

  .share_box {
    position: absolute;
    z-index: 10000;
    right: 2%;
    font-size: 28px;
    color: #fff;
    width: 240px;
  }

  .share_box img {
    width: 120px;
    position: relative;
    left: 100px;
  }

  .share_box p {
    margin-top: 10px;
  }
}
</style>
